<template>
	<!-- vue content -->
	<view class="ver match-width" style="z-index: 999;position: fixed;left: 0;top: 0;"
		:style="{height:totalHeight+'px'}">
		<view class="ver " style="position: relative;align-items:flex-end;">
			<view class="bg-white match-width match-height" :style="{height:totalHeight+'px','opacity':scrollProgress}">
			</view>
			<view style="position: absolute;left: 0;top: 0;" class="ver match-width">
				<view class="match-width" :style="{height:statusBarHeight+'px'}" style="">
				</view>

				<!-- <view :style="{height:statusBarHeight+'px'}" style="opacity: 0;">1</view> -->
				<view class="hor ver-center" style="position: relative;height: 70rpx;">
					<view class="match-width text-center font18 uni-bold" style="position: absolute;left: top:0;">
						{{title}}
					</view>
					<image src="@/static/img/ic_arrow_left_black.png" style="width: 70rpx;height: 70rpx;z-index: 9999;"
						@click.stop="onClickBack()">
					</image>

				</view>

			</view>
		</view>
	</view>

</template>
<script>
	let _this;
	export default {
		name: "title",
		//属性
		props: {
			// 属性名称: {
			// 	type: String, //属性类型
			// 	value: "值"
			// },
			// ......
			title: { //
				type: String,
				default: "标题"
			},
		},
		data() {
			return {
				// 系统状态栏的高度
				statusBarHeight: 0,
				totalHeight: 0,

				scrollProgress: 0
			}
		},
		//组件生命周期
		created: function(e) {
			_this = this;
			let titleHeight = uni.upx2px(70)

			// 获取系统栏高度
			uni.getSystemInfo({
				success: res => {
					console.log(res)
					_this.statusBarHeight = res.statusBarHeight;
					// console.log(_this.statusBarHeight, titleHeight)
					_this.totalHeight = _this.statusBarHeight + titleHeight;
					// console.log(_this.totalHeight)
				}
			});


			uni.$on('onPageScroll', function(data) { //接收参数
				let judgedHeight = _this.totalHeight * 2;
				if (data > judgedHeight) {
					_this.scrollProgress = 1;
				} else {
					let cha = judgedHeight - data;
					_this.scrollProgress = 1 - (cha / judgedHeight);
				}
				// console.log(data)
				// console.log(_this.scrollProgress)
				this.$emit("progressChange", _this.scrollProgress)
			});
		},
		// watch: {
		// 	src(e) {
		// 		this.loadingStatus = 0
		// 	}
		// },
		methods: {
			onClcik() {
				this.$emit("click")
			},
			onClickBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #F8F8F8;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>